import { defineStore } from "pinia";
import componentParamsFnMap from "@/config/component";
// 组件使用情况对象 : 避免组件名称重复,后面也许有啥用，先这样设计吧
let useInfomation = {};
export const useMainStore = defineStore("main", {
      state: (): any => ({
            // 整个页面组件信息
            componentsInfomation: {
                  layout: componentParamsFnMap.layout(),
            },
            // 当前活动组件 - 默认值应该是布局组件
            activeComponentName: "layout",
      }),
      getters: {
            currentActiveCompoentParmas(state) {
                  const activeComponetInfomation =
                        state.componentsInfomation[state.activeComponentName];
                  return activeComponetInfomation;
            },

            layoutComponentsInfomation(state) {
                  return state.componentsInfomation.layout;
            },
            otherComponentsInfomation(state) {
                  const { layout, ...otherConponentsInfo } =
                        state.componentsInfomation;
                  return otherConponentsInfo;
            },
            parmasDefaultActive(state) {
                  return Object.keys(
                        this.currentActiveCompoentParmas.formComponents
                  );
            },
      },
      actions: {
            setComponentOptions(componentName: string, updateStyleInfo: any) {
                  // 取到需要修改的组件参数
                  let activeComponent =
                        this.componentsInfomation[componentName].formComponents;
                  for (const key in updateStyleInfo) {
                        // 获取对应组件参数
                        let componentParams = activeComponent[key];
                        // 与传入的参数进行合并
                        componentParams.property = {
                              ...componentParams.property,
                              ...updateStyleInfo[key],
                        };
                  }
            },
            // 获取组件使用时的名称
            getComponentName(componentName: string): string {
                  // 1. 获取当前组件的index
                  if (!useInfomation[componentName]) {
                        useInfomation[componentName] = 0;
                  }
                  // 2. 将index + 1
                  const index = useInfomation[componentName]++;
                  // 3. 拼接上组件名称返回
                  return componentName + index;
            },
            // 添加一个组件，这里应该还有其他参数，比如说拖拽默认的位置，拖拽的默认为absolute定位
            addComponent(componentName: string, defaultValue: any) {
                  // 1. 拼接出组件名称
                  let useComponentName = this.getComponentName(componentName);
                  // 2. 添加组件, 获取基础组件信息
                  // 将添加的当前组件的基本信息放入组件内容中
                  this.componentsInfomation[useComponentName] =
                        componentParamsFnMap[componentName](defaultValue);
                  this.activeComponentName = useComponentName;
            },
            // 移除组件
            removeComponent(componentName: string) {
                  this.activeComponentName = "layout";
                  delete this.componentsInfomation[componentName];
            },
            // 清空所有组件
            clearAllComponent() {
                  this.componentsInfomation = {
                        layout: componentParamsFnMap.layout(),
                  };
                  useInfomation = {};
            },
            // 设置当前活动的组件名称
            setActiveComponetName(componentName: string) {
                  this.activeComponentName = componentName || "layout";
            },
      },
});
